<template>
  <div class="type-nav">
    <div class="container">
<!--      事件的委派-->
      <div @mouseleave="leaveIndex" @mouseenter="enterShow">
      <h2 class="all">全部商品分类</h2>
<!--过渡动画，必须要有v-show或者v-if-->
        <transition  name="sort">
          <div class="sort"  v-show="show">
          <!--        利用了事件的委派-->
          <div class="all-sort-list2" @click="goSearch">
            <div class="item" v-for="(c1,index) in categoryList" :key="c1.categoryId" :class="{cur:currentIndex == index}">
              <!--            一级分类;&gt;-->
              <h3 @mouseenter="changeIndex(index)" >
                <a  :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{c1.categoryName}}</a>
                <!--              实现跳转-->
                <!--                <router-link to="/search">{{c1.categoryName}}</router-link>-->
              </h3>
              <!--            二级分类&ndash;&gt;                 :style="{display: currentIndex==index?'block':'none' }"显示控制隐藏-->
              <div class="item-list clearfix" v-show="currentIndex == index">

                <div class="subitem" >
                  <dl class="fore"  v-for="(c2,index) in c1.categoryChild" :key="c2.categoryId">
                    <dt>
                      <a :data-categoryName="c2.categoryName" :data-category2Id="c2.categoryId">{{c2.categoryName}}</a>
                      <!--                    <router-link to="/search">{{c2.categoryName}}</router-link>-->
                    </dt>
                    <!--                  三级分类-->
                    <dd>
                      <em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId">
                        <a :data-categoryName="c3.categoryName" :data-category3Id="c3.categoryId">{{c3.categoryName}}</a>
                        <!--                      <router-link to="/search">{{c3.categoryName}}</router-link>-->
                      </em>
                    </dd>
                  </dl>
                </div>
              </div>
            </div>
          </div >
        </div>
        </transition>
    </div>
      <nav class="nav">
        <a href="###">服装城</a>
        <a href="###">美妆馆</a>
        <a href="###">尚品汇超市</a>
        <a href="###">全球购</a>
        <a href="###">闪购</a>
        <a href="###">团购</a>
        <a href="###">有趣</a>
        <a href="###">秒杀</a>
      </nav>
      </div>
  </div>
</template>



<script>

// <!-- 引入节流和防抖插件  引入全部的功能函数（最好是按需引入）-->
// import _ from 'lodash';
// 按需引入lodash
import throttle from "lodash/throttle"

//拿到数据
import {mapState} from 'vuex'
export default {
  name: "TypeNav",
  data(){
    return{
      currentIndex:-1,
      //控制整体的显示与隐藏
      show:true
    }
  },
//  组件挂载完毕，可以想服务器发请求
  mounted() {

  //  当组件挂载完毕，让show属性边为false
    if (this.$route.path !== '/home' ){
      this.show =false
    }
  },
  computed:{
    ...mapState({
      //对象写法，当使用计算属性的时候，右侧会立即执行一次
      //state参数是大仓库的数据
      categoryList:(state)=>{
        return state.home.categoryList;
      }
    })
  },
  methods:{
  //  鼠标进入修改样式
  //   changeIndex(index){
  //       this.currentIndex = index
  //
  //   },
  //lodash不能用箭头函数
  //  es5写法 不然用不了 _.throttle功能,  按需引入就不用加
    changeIndex:throttle(function (index){
           this.currentIndex = index
    },50),
    //鼠标移出
    leaveIndex(index){
        this.currentIndex = -1
      //在search中
      if (this.$route.path !== '/home' ){
        this.show =false
      }
    },
    enterShow(){
      //在search中
      if (this.$route.path !== '/home' ){
        this.show = true
      }
    },
    goSearch(event){
      // 最好的方式使用事件的委派，编程式导航
      //但存在问题，1.不知道点击的是那个标签，2.如何获取参数
      //问题1.子节点中的a标签加上自定义属性data-categoryName，其余不加
     // 加even的可以获取到发生事件的节点【h3\a\dt\dl】
      // 节点有一个属性dateset ，可以获取节点的自定义属性和属性值
      const element = event.target;
      const {categoryname,category1id,category2id,category3id} = element.dataset
      //  console.log(element.dataset) //能获取自定义属性的对应的属性和属性值
      // console.log(category1id,category2id,category3id)
      if(categoryname){
      //    现在获取到了a标签且a标签属性值，则分清一级二级三级标签{:data-category1Id="c1.categoryId"}
            const location = {name:'search'};
            const query = {categoryName: categoryname}
        //一级二级三级里分别往query数组里加 category1Id属性
        if(category1id){
                //  一级
          query.category1Id = category1id
          }else if(category2id){
          //  二级
          query.category2Id = category2id
              }else {
               //  三级
          query.category3Id = category3id
        }
        // console.log(query,location)
        //整理数据,想location里加query对象
        // 判断，如果是路由跳转的时候，带有params参数，合并一下
        if(this.$route.params){
          //不合并的话，只能得到一个参数（params,和query只能带一个）
          location.params = this.$route.params
          location.query = query
          // 路由跳转
          this.$router.push(location)
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.type-nav {
  border-bottom: 2px solid #e1251b;

.container {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  position: relative;

.all {
  width: 210px;
  height: 45px;
  background-color: #e1251b;
  line-height: 45px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
}

.nav {
a {
  height: 45px;
  margin: 0 22px;
  line-height: 45px;
  font-size: 16px;
  color: #333;
}
}

.sort {
  position: absolute;
  left: 0;
  top: 45px;
  width: 210px;
  height: 461px;
  position: absolute;
  background: #fafafa;
  z-index: 999;

.all-sort-list2 {
.item {
h3 {
  line-height: 30px;
  font-size: 14px;
  font-weight: 400;
  overflow: hidden;
  padding: 0 20px;
  margin: 0;

a {
  color: #333;
}
}

.item-list {
  //配合v-show去掉
  //display: none;
  position: absolute;
  width: 734px;
  min-height: 460px;
  background: #f7f7f7;
  left: 210px;
  border: 1px solid #ddd;
  top: 0;
  z-index: 9999 !important;

.subitem {
  float: left;
  width: 650px;
  padding: 0 4px 0 8px;

dl {
  border-top: 1px solid #eee;
  padding: 6px 0;
  overflow: hidden;
  zoom: 1;

&.fore {
   border-top: 0;
 }

dt {
  float: left;
  width: 54px;
  line-height: 22px;
  text-align: right;
  padding: 3px 6px 0 0;
  font-weight: 700;
}

dd {
  float: left;
  width: 415px;
  padding: 3px 0 0;
  overflow: hidden;

em {
  float: left;
  height: 14px;
  line-height: 14px;
  padding: 0 8px;
  margin-top: 5px;
  border-left: 1px solid #ccc;
}
}
}
}
}
//通过css完成隐藏和显示
//&:hover {
//.item-list {
//  display: block;
//}
//}
}
  //.item:hover{
  //  background-color: skyblue;
  //}
  //高级写法
  .cur {
    background-color: skyblue;
  }
}
}

//过渡动画的样式
//  开始状态
  .sort-enter,.sort-leave-to{
    height: 0px;
  }
//  过渡动画的结束状态（进入）
.sort-enter-to,.sort-leave{
  height: 461px;
}
//  定义动画的事件和速率
  .sort-enter-active,.sort-leave-active{
    //所有元素，0.5s完成，迅速
    transition: all .5s linear;
  }
}
}
</style>